<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <div class="form_wrap">
        <!-- v-model 双向绑定值的指令
         收集表单 控件的值 input text checkbox select textarea radio  -->

         <!--面试题:vue的双向绑定原理或v-model的双向绑定原理？
           v-model 双向绑定的原理是基于
          Object.defineproperty 的set赋值劫持数据的变化，get 负责赋值数据的变化 -->

          <!-- 面试题：v-model 基本实现过程是什么？
           实现过程v-model 基于input事件 触发的
           进行实时的监听值的变化，并改变表单的value实现双向变化  -->
         用户名： <input v-model="usernameVal"  type="text" id="username">
         <br>
          <h1>收集到的值：{{usernameVal}}</h1>
        <hr>
        <h1>原生js的mvvm操作</h1>
       密码： <input v-model="passwordVal" type="text" id="password">
       <br>
       <h1 id="pass">收集到的密码:{{passwordVal}}</h1>
       <hr>
        
        <h1>收集select的值</h1>
        <select v-model="gameVal">
           <option value="wang">王者荣耀</option>
           <option value="jue">绝地求生</option>
           <option value="yong">永劫无间</option>
           <option value="lol">英雄联盟</option>
        </select>
        <h1>你选择的游戏是：{{gameVal}}</h1>
        
        
      </div>
      <hr>
      <h1>收集checkbox的值</h1>
      <!-- checkbox 默认收集的是true和false的布尔值 -->
        <input type="checkbox" v-model="checkVal">是否同意协议
        <h1>你选择的是：{{checkVal}}</h1>
        <div id="box" v-show="checkVal" style="width:200px;height:200px;background:red">协议---你必须充1000</div>
      <!-- h5 的range  滑轨 -->
       音量：<input type="range" v-model="vocie" min="0" max="100" >
       <h1>当前选择的音量：{{vocie}}</h1>


       <!-- 原生js v-model收集用户的选择 -->
        <div>
          <input type="checkbox" value="chi"> 吃
          <input type="checkbox" value="shui"> 睡
          <input type="checkbox" value="game"> 打游戏
          <input type="checkbox" value="moivce"> 看电影
        </div>
        <!-- 单选框收集值 -->

        <!-- 用v-model 完成 + - x / 计算器 -->
         <hr>
         <input type="text"> 
         <select>
           <option>+</option>
           <option>-</option>
           <option>*</option>
           <option>/</option>
         </select>
          <input type="text"> 
          <h1>计算结果是：0</h1>
          <button>计算</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      // vue采用的mvvm的设计模式，mvvm是mvc的改进版
      // 面试题:你对mvc 和mvvm模式的理解
      // mvc--》 是model 数据模型层  view 视图层    controller 控制层 必须要通过控制层 操作数据层 改变视图层
      
      //mvvm  model 数据模型层 view视图层
      //vm层--viewModel 视图模型层 是连接视图和数据的桥梁
      // 可以实现双向的监听 视图改变会改变数据 数据改变会改变视图 实现原理是Object.defineproperty

    //  window.onload=function(){
    //     let password=document.getElementById("password"); //密码输入框
    //     let pass="12345"
    //     password.value=pass;
    //  }

        new Vue({
          el:"#app",
          data(){
            return {
              usernameVal:"张三",//将输入框的值收集
              passwordVal:"123456",//将密码框的值收集
              gameVal:"",//收集到的select的值
              checkVal:"",//收集到的checkbox的值
              vocie:18//收集range 的值 音量
            }
          },
          methods:{
            
          }
        })
    </script>
</body>
</html>